<template>
  <view>
    <view class="count red">未签到人数：{{ unsignedArr.length }}</view>
    <view class="signed" v-for="(userVo,index) in unsignedArr" :key="userVo.id">
      <view>{{ userVo | customConcat }}</view>
    </view>
    <view class="count">
      <view>请假人数：{{ askForLeaveArr.length }}</view>
      <view class="u-tips-color u-font-md u-margin-10">点击学生可查看请假信息</view>
    </view>
    <view class="signed blue" v-for="(userVo,index) in askForLeaveArr" :key="userVo.id">
      <view @click="toAskForLeave(userVo.askForLeaveId)">{{ userVo | customConcat }}</view>
    </view>
    <view class="count">已签到人数：{{ signedArr.length }}</view>
    <view class="signed" v-for="(userVo,index) in signedArr" :key="userVo.id">
      <view>{{ userVo | customConcat }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      askForLeaveArr: [],
      unsignedArr: [],
      signedArr: []
    }
  },
  onLoad(e){
    this.initial(e);
  },
  onPullDownRefresh(){
    this.initial();
  },
  methods: {
    initial(e){
      this.$u.api.getSignDetail(e.courseId,e.id,e.bt).then(res => {
        this.signHandler(res.data);
        uni.stopPullDownRefresh();
      })
    },
    signHandler(list){
      let askForLeaveArr = [];
      let unsignedArr = [];
      let signedArr = [];
      for (let userVo of list) {
        if (userVo.flag === 1){
          askForLeaveArr.push(userVo);
        }else  if (userVo.flag === 2){
          signedArr.push(userVo);
        }else {
          unsignedArr.push(userVo);
        }
      }
      this.signedArr = signedArr;
      this.askForLeaveArr = askForLeaveArr;
      this.unsignedArr = unsignedArr;
    },
    toAskForLeave(id){
      console.log(id)
      this.$u.route({
        url: '/pages/ask_for_leave_detail/ask_for_leave_detail',
        params: {
          id: id
        }
      })
    }
  },
  filters: {
    customConcat(userVo){
      return userVo.num.concat(userVo.name);
    }
  }
}
</script>

<style lang="scss">
.signed{
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-evenly;
  view{
    padding: 10rpx;
    border: 1rpx solid silver;
    margin: 5rpx;
  }
}
.blue{
  color: #2B85E4;
}
.red {
  color: #9c1712!important;
}
.count{
  color: #3F536E;
  text-align: center;
  font-weight: bolder;
  margin: 30rpx 0 30rpx 0;
  font-size: 35rpx;
}
</style>
